<script>
import SignInCom from "@/components/sign_components/SignInCom.vue";
import {bus} from "vue3-eventbus";
import TabbarCom from "@/components/sign_components/TabbarCom.vue";
import LogoCom from "@/components/sign_components/LogoCom.vue";

//  录或tabbar页面的中间页
export default {
  name: "LoginPage",
  components: {LogoCom, TabbarCom, SignInCom},
  data(){
    return{
      mode:true, //AAAtrue为登录，false为tabbar
    }
  },
  mounted() {
    bus.on("changeTabbar",(e)=>this.loginOrOut(e))
  },
  methods:{
    loginOrOut(e){
      this.mode = e.mode;
      if (this.mode){
        //退出登录
        bus.emit('pageJumpTo',0)
      }else{
        //登陆成功
        bus.emit('pageJumpTo',1)
      }
    }
  }
}
</script>

<template>
  <div class="all-container" :class="mode ? 'sign-all-container' : 'tabbar-all-container'">
    <div class="card-container" :class="mode ? 'sign-card-container' : 'tabbar-card-container'">
      <!--SIGN页面-->
      <transition name="fade">
        <SignInCom class="sign-com" v-show="mode"/>
      </transition>
      <!--TABBAR页面-->
      <transition name="fade">
        <TabbarCom v-if="!mode"/>
      </transition>
      <!--logo组件-->
      <transition name="fade">
        <LogoCom v-if="mode"/>
      </transition>
    </div>
  </div>
</template>

<style scoped>
.sign-com{
  animation: 2.4s appear 1;
}
@keyframes appear {
  0%{
    opacity: 0;
  }
}
/*框架*/
.all-container{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.sign-all-container{
  height: 100%;
  transition: 1s;
}
.tabbar-all-container{
  height: 48px;
  transition: 1s;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
.card-container{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: #f8f8f844;
}
.sign-card-container{
  width: 58%;
  height: 72%;
  box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
  border-radius: 4px;
  transition: 1s;
}
.tabbar-card-container{
  width: 100%;
  height: 100%;
  transition: 1s;
  background-color: #fbfbfb88;
}


</style>